<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>构建代码</title>
	<link rel="stylesheet" href="/component/pear/css/pear.css" />
	<script src="/component/layui/layui.js"></script>
	<script src="/component/pear/pear.js"></script>
	<script src="/component/plug/sortable/Sortable.js"></script>
	<style>
		input[disabled] {
			border: 0px !important;
		}

		.layui-form-checkbox {
			margin-bottom: 6px;
		}

		.drag-handle {
			cursor: move;
			cursor: -webkit-grabbing;
			margin-right: 4px;
		}
	</style>
</head>

<body>
	<form class="layui-form" action="" lay-filter="form" autocomplete="off">
		<div class="mainBox">
			<div class="main-container">
				<div class="layui-tab layui-tab-brief" lay-filter="tab">
					<ul class="layui-tab-title">
						<li class="layui-this">基本配置<span class="layui-font-red">*</span></li>
						<li>条件字段配置<span class="layui-font-red">*</span></li>
						<li>表单字段配置<span class="layui-font-red">*</span></li>
						<li>表格字段配置<span class="layui-font-red">*</span></li>
					</ul>
					<div class="layui-tab-content">
						<!--基本配置-->
						<div class="layui-tab-item layui-show">
							<div class="layui-form-item">
								<label class="layui-form-label">表名<span class="layui-font-red">*</span></label>
								<div class="layui-input-block">
									<input disabled type="text" name="tableName" lay-verify="required"
										placeholder="请输入表名" class="layui-input">
								</div>
							</div>
							<div class="layui-form-item">
								<label class="layui-form-label">模块<span class="layui-font-red">*</span></label>
								<div class="layui-input-block">
									<select id="moduleName" name="moduleName" lay-search></select>
								</div>
							</div>
							<div class="layui-form-item">
								<label class="layui-form-label">实体名称<span class="layui-font-red">*</span></label>
								<div class="layui-input-block">
									<input type="text" name="entityName" lay-verify="required" placeholder="请输入实体名称"
										class="layui-input">
								</div>
							</div>
							<div class="layui-form-item">
								<label class="layui-form-label">接口名称<span class="layui-font-red">*</span></label>
								<div class="layui-input-block">
									<input type="text" name="serviceName" lay-verify="required" placeholder="请输入接口名称"
										class="layui-input">
								</div>
							</div>
							<div class="layui-form-item">
								<label class="layui-form-label">接口描述<span class="layui-font-red">*</span></label>
								<div class="layui-input-block">
									<input type="text" name="serviceDescription" lay-verify="required"
										placeholder="请输入接口描述" class="layui-input">
								</div>
							</div>
						</div>
						<!--条件字段配置-->
						<div class="layui-tab-item">
							<fieldset class="layui-elem-field layui-field-title">
								<legend>字段选择</legend>
							</fieldset>
							<div id="filterFieldArr"></div>
							<fieldset class="layui-elem-field layui-field-title">
								<legend>字段配置</legend>
							</fieldset>
							<table class="layui-table" lay-skin="nob" lay-size="lg">
								<thead>
									<tr>
										<th>字段</th>
										<th>字段类型</th>
										<th>数据源类型</th>
										<th>数据源</th>
									</tr>
								</thead>
								<tbody id="tabFilterTbody">

								</tbody>
							</table>
						</div>
						<!--表单字段配置-->
						<div class="layui-tab-item">
							<fieldset class="layui-elem-field layui-field-title">
								<legend>字段选择</legend>
							</fieldset>
							<div style="margin-bottom: 5px;">
								<input type="checkbox" lay-filter="checkAllFormField" lay-skin="switch"
									lay-text="全选|全不选">
							</div>
							<div id="formFieldArr"></div>
							<fieldset class="layui-elem-field layui-field-title">
								<legend>字段配置</legend>
							</fieldset>
							<table class="layui-table" lay-skin="nob" lay-size="lg">
								<thead>
									<tr>
										<th>字段</th>
										<th>是否必填</th>
										<th>字段类型</th>
										<th>数据源类型</th>
										<th>数据源</th>
									</tr>
								</thead>
								<tbody id="tabFormTbody">

								</tbody>
							</table>
						</div>
						<!--表格字段配置-->
						<div class="layui-tab-item">
							<fieldset class="layui-elem-field layui-field-title">
								<legend>字段选择</legend>
							</fieldset>
							<div style="margin-bottom: 5px;">
								<input type="checkbox" lay-filter="checkAllTableField" lay-skin="switch"
									lay-text="全选|全不选">
							</div>
							<div id="tableFieldArr"></div>
							<fieldset class="layui-elem-field layui-field-title">
								<legend>字段配置</legend>
							</fieldset>
							<table class="layui-table" lay-skin="nob" lay-size="lg">
								<thead>
									<tr>
										<th>字段</th>
										<th>是否排序</th>
									</tr>
								</thead>
								<tbody id="tabTableTbody">

								</tbody>
							</table>
						</div>
					</div>
				</div>

			</div>
		</div>
		<div class="bottom">
			<div class="button-container">
				<button type="submit" class="pear-btn pear-btn-sm pear-btn-primary" lay-submit="" lay-filter="save">
					<i class="icon pear-icon pear-icon-select-bold"></i>
					预览
				</button>
				<button type="button" lay-click="layerclose" class="pear-btn pear-btn-sm">
					<i class="icon pear-icon pear-icon-close-bold"></i>
					关闭
				</button>
			</div>
		</div>
	</form>
</body>

</html>

<script type="text/html" id="tabFilterTbodyTpl">
	{{#  layui.each(d.list, function(index, data){ }}
	<tr data-field="{{data.field}}">
		<td><span class="icon pear-icon pear-icon-pin drag-handle"></span>{{data.field}}</td>
		<td>
			<select>
				{{#  layui.each(d.fieldTypeEnumArr, function(index, item){ }}
				<option value="{{item.key}}">{{item.description}}</option>
				{{#  }); }}
			</select>
		</td>
		<td>
			<select lay-filter="dataSourceSelect">
				{{#  layui.each(d.dataSourceTypeEnumArr, function(index, item){ }}
				<option value="{{item.key}}">{{item.description}}</option>
				{{#  }); }}
			</select>
		</td>
		<td>
			<input type="text" placeholder="请输入数据源" class="layui-input">
		</td>
	</tr>
	{{#  }); }}
</script>

<script type="text/html" id="tabFormTbodyTpl">
	{{#  layui.each(d.list, function(index, data){ }}
	<tr data-field="{{data.field}}">
		<td><span class="icon pear-icon pear-icon-pin drag-handle"></span>{{data.field}}</td>
		<td>
			<select>
				<option value="true">是</option>
				<option value="false">否</option>
			</select>
		</td>
		<td>
			<select>
				{{#  layui.each(d.fieldTypeEnumArr, function(index, item){ }}
				<option value="{{item.key}}">{{item.description}}</option>
				{{#  }); }}
			</select>
		</td>
		<td>
			<select lay-filter="dataSourceSelect">
				{{#  layui.each(d.dataSourceTypeEnumArr, function(index, item){ }}
				<option value="{{item.key}}">{{item.description}}</option>
				{{#  }); }}
			</select>
		</td>
		<td>
			<input type="text" placeholder="请输入数据源" class="layui-input" style="width:250px">
		</td>
	</tr>
	{{#  }); }}
</script>

<script type="text/html" id="tabTableTbodyTpl">
	{{#  layui.each(d.list, function(index, data){ }}
	<tr data-field="{{data.field}}">
		<td><span class="icon pear-icon pear-icon-pin drag-handle"></span>{{data.field}}</td>
		<td>
			<select>
				<option value="false">否</option>
				<option value="true">是</option>
			</select>
		</td>
	</tr>
	{{#  }); }}
</script>

<script>
	layui.use(['form', 'jquery', 'context', 'permission', 'popup', 'tree', 'util', 'common', 'button', 'table', 'tableext', 'laytpl'], function () {
		var form = layui.form;
		var $ = layui.jquery;
		var context = layui.context;
		var popup = layui.popup;
		var tree = layui.tree;
		var util = layui.util;
		var common = layui.common;
		var button = layui.button;
		var table = layui.table;
		var laytpl = layui.laytpl;

		var basePath = context.get("base-path");
		var tableName = common.getQueryString("tablename");

		var fieldTypeEnumArr = [];
		var dataSourceTypeEnumArr = [];
		var columnArr = [];//字段列表
		var dataJson = {};//传递到下一个页面的参数

		form.val("form", { tableName: tableName });

		//获取字段类型枚举
		$.ajax({
			url: basePath + '/api/core/enum/getlist',
			data: JSON.stringify({ "content": "EnumSysCodeFieldType" }),
			success: function (result) {
				if (result.succeeded) {
					fieldTypeEnumArr = result.data;
				} else {
					popup.failure(JSON.stringify(result.errors));
				}
			}
		})
		//获取数据来源枚举
		$.ajax({
			url: basePath + '/api/core/enum/getlist',
			data: JSON.stringify({ "content": "EnumSysCodeDataSourceType" }),
			success: function (result) {
				if (result.succeeded) {
					dataSourceTypeEnumArr = result.data;
				} else {
					popup.failure(JSON.stringify(result.errors));
				}
			}
		})
		//获取表字段列表
		$.ajax({
			url: basePath + '/api/system/code/getcolumnlist',
			data: JSON.stringify({ "content": tableName }),
			success: function (result) {
				if (result.succeeded) {
					columnArr = result.data;
					common.loadCheckBox({//加载条件字段配置复选框
						divId: "#filterFieldArr",
						staticData: columnArr,
						layFilter: "filterField",
						keyField: "dbColumnName",
						valueField: "dbColumnName",
					})
					common.loadCheckBox({//加载表单字段配置复选框
						divId: "#formFieldArr",
						staticData: columnArr,
						layFilter: "formField",
						keyField: "dbColumnName",
						valueField: "dbColumnName",
					})
					common.loadCheckBox({//加载表格字段配置复选框
						divId: "#tableFieldArr",
						staticData: columnArr,
						layFilter: "tableField",
						keyField: "dbColumnName",
						valueField: "dbColumnName",
					})
				} else {
					popup.failure(JSON.stringify(result.errors));
				}
			}
		})

		/********1.基本配置***********/
		common.loadSelect({
			divId: "#moduleName",
			url: basePath + '/api/system/code/getmodulelist',
		})

		/********2.条件查询配置***********/
		form.on('checkbox(filterField)', function (data) {//选中字段
			if (data.elem.checked) {//选中
				let columnData = columnArr.filter(o => o.dbColumnName == data.value)[0];
				let getTpl = tabFilterTbodyTpl.innerHTML;
				laytpl(getTpl).render({ list: [{ field: data.value }], fieldTypeEnumArr: fieldTypeEnumArr, dataSourceTypeEnumArr: dataSourceTypeEnumArr }, function (html) {
					$("#tabFilterTbody").append(html)
					//默认选中特定类型
					if (columnData.entityType_NonEmpty == "bool") {//开关
						$("#tabFilterTbody tr:last-child").find("select:eq(0)").find('option[value=5]').attr("selected", "selected");
					} else if (columnData.entityType_NonEmpty == "DateTime" || columnData.entityType_NonEmpty == "DateOnly" || columnData.entityType_NonEmpty == "TimeOnly") {//日期范围选择框
						$("#tabFilterTbody tr:last-child").find("select:eq(0)").find('option[value=8]').attr("selected", "selected");
					}
					if (data.value.endsWith("_DictValue")) {//字典数据
						$("#tabFilterTbody tr:last-child").find("select:eq(0)").find('option[value=6]').attr("selected", "selected");
						$("#tabFilterTbody tr:last-child").find("select:eq(1)").find('option[value=2]').attr("selected", "selected");
						$("#tabFilterTbody tr:last-child").find("input").val($("input[name=serviceName]").val() + data.value.replace("_DictValue", ""));
					}
					form.render("select");
				});
			} else {//取消选中
				$("#tabFilterTbody tr[data-field=" + data.value + "]").remove();
			}
		});
		Sortable.create(document.getElementById('tabFilterTbody'), {
			handle: '.drag-handle',
			animation: 150
		});

		/********3.表单配置***********/
		form.on('switch(checkAllFormField)', function (data) {//选中字段
			var list = [];
			$('#formFieldArr input[type=checkbox]').each(function (index, item) {
				$(item).prop("checked", data.elem.checked)
				list.push({
					field: $(item).attr("value")
				})
			});
			form.render("checkbox");
			if (data.elem.checked) {
				let getTpl = tabFormTbodyTpl.innerHTML;
				laytpl(getTpl).render({ list: list, fieldTypeEnumArr: fieldTypeEnumArr, dataSourceTypeEnumArr: dataSourceTypeEnumArr }, function (html) {
					$("#tabFormTbody").append(html);
					$.each(columnArr, function (index, item) {
						//默认选中特定类型
						if (item.entityType_NonEmpty == "bool") {//开关
							$("#tabFormTbody tr:eq(" + index + ")").find("select:eq(1)").find('option[value=5]').attr("selected", "selected");
						} else if (item.entityType_NonEmpty == "DateTime" || item.entityType_NonEmpty == "DateOnly" || item.entityType_NonEmpty == "TimeOnly") {//日期选择框
							$("#tabFormTbody tr:eq(" + index + ")").find("select:eq(1)").find('option[value=7]').attr("selected", "selected");
						}
						if (item.dbColumnName.endsWith("_DictValue")) {//字典数据
							$("#tabFormTbody tr:eq(" + index + ")").find("select:eq(1)").find('option[value=6]').attr("selected", "selected");
							$("#tabFormTbody tr:eq(" + index + ")").find("select:eq(2)").find('option[value=2]').attr("selected", "selected");
							$("#tabFormTbody tr:eq(" + index + ")").find("input").val($("input[name=serviceName]").val() + item.dbColumnName.replace("_DictValue", ""));
						}
					})
					form.render("select");
				});
			} else {
				$("#tabFormTbody").empty();
			}
		});
		form.on('checkbox(formField)', function (data) {//选中字段
			if (data.elem.checked) {//选中
				let columnData = columnArr.filter(o => o.dbColumnName == data.value)[0];
				let getTpl = tabFormTbodyTpl.innerHTML;
				laytpl(getTpl).render({ list: [{ field: data.value }], fieldTypeEnumArr: fieldTypeEnumArr, dataSourceTypeEnumArr: dataSourceTypeEnumArr }, function (html) {
					$("#tabFormTbody").append(html);
					//默认选中特定类型
					if (columnData.entityType_NonEmpty == "bool") {//开关
						$("#tabFormTbody tr:last-child").find("select:eq(1)").find('option[value=5]').attr("selected", "selected");
					} else if (columnData.entityType_NonEmpty == "DateTime" || columnData.entityType_NonEmpty == "DateOnly" || columnData.entityType_NonEmpty == "TimeOnly") {//日期范围选择框
						$("#tabFormTbody tr:last-child").find("select:eq(1)").find('option[value=7]').attr("selected", "selected");
					}
					if (data.value.endsWith("_DictValue")) {//字典数据
						$("#tabFormTbody tr:last-child").find("select:eq(1)").find('option[value=6]').attr("selected", "selected");
						$("#tabFormTbody tr:last-child").find("select:eq(2)").find('option[value=2]').attr("selected", "selected");
						$("#tabFormTbody tr:last-child").find("input").val($("input[name=serviceName]").val() + data.value.replace("_DictValue", ""));
					}
					form.render("select");
				});
			} else {//取消选中
				$("#tabFormTbody tr[data-field=" + data.value + "]").remove();
			}
		});
		Sortable.create(document.getElementById('tabFormTbody'), {
			handle: '.drag-handle',
			animation: 150
		});

		form.on('select(dataSourceSelect)', function (data) {//监听tab2和tab3数据源类型切换
			var field = data.othis.parents("tr").find("td:eq(0)").text();
			if (data.value == 1) {//枚举
				data.othis.parents("td").prev().find("select").siblings("div.layui-form-select").find('dl').find('dd[lay-value=6]').click();
			} else if (data.value == 2) {//数据字典
				data.othis.parents("td").prev().find("select").siblings("div.layui-form-select").find('dl').find('dd[lay-value=6]').click();
				data.othis.parents("td").next().find("input").val($("input[name=serviceName]").val() + field.replace("_DictValue", ""));
			}
		})

		/********4.表格配置***********/
		form.on('switch(checkAllTableField)', function (data) {//选中字段
			var list = [];
			$('#tableFieldArr input[type=checkbox]').each(function (index, item) {
				$(item).prop("checked", data.elem.checked)
				list.push({
					field: $(item).attr("value")
				})
			});
			form.render("checkbox");
			if (data.elem.checked) {
				let getTpl = tabTableTbodyTpl.innerHTML;
				laytpl(getTpl).render({ list: list }, function (html) {
					$("#tabTableTbody").append(html);
					form.render("select");
				});
			} else {
				$("#tabTableTbody").empty();
			}
		});
		form.on('checkbox(tableField)', function (data) {//选中字段
			if (data.elem.checked) {//选中
				let getTpl = tabTableTbodyTpl.innerHTML;
				laytpl(getTpl).render({ list: [{ field: data.value }] }, function (html) {
					$("#tabTableTbody").append(html);
					form.render("select");
				});
			} else {//取消选中
				$("#tabTableTbody tr[data-field=" + data.value + "]").remove();
			}
		});
		Sortable.create(document.getElementById('tabTableTbody'), {
			handle: '.drag-handle',
			animation: 150
		});

		/********表单提交***********/
		form.on("submit(save)", function (data) {
			//遍历条件查询配置
			var filterFieldList = [];
			$.each($("#tabFilterTbody tr"), function (index, item) {
				filterFieldList.push({
					fieldName: $(item).attr("data-field"),
					fieldType: $(item).find("td:eq(1)>select").val(),
					dataSourceType: $(item).find("td:eq(2)>select").val(),
					dataSource: $(item).find("td:eq(3)>input").val(),
				})
			})
			data.field.filterFieldList = filterFieldList;

			var formFieldList = [];
			$.each($("#tabFormTbody tr"), function (index, item) {
				formFieldList.push({
					fieldName: $(item).attr("data-field"),
					isRequired: $(item).find("td:eq(1)>select").val(),
					fieldType: $(item).find("td:eq(2)>select").val(),
					dataSourceType: $(item).find("td:eq(3)>select").val(),
					dataSource: $(item).find("td:eq(4)>input").val(),
				})
			})
			data.field.formFieldList = formFieldList;

			var tableFieldList = [];
			$.each($("#tabTableTbody tr"), function (index, item) {
				tableFieldList.push({
					fieldName: $(item).attr("data-field"),
					isSort: $(item).find("td:eq(1)>select").val(),
				})
			})
			data.field.tableFieldList = tableFieldList;

			dataJson = data.field;
			top.layer.open({
				type: 2,
				title: "代码预览",
				area: ['100%', '100%'],
				content: 'view/system/code/preview.html?buildWindowName=' + window.name + '&fresh=' + Math.random(),
			});

			return false;
		});

		window.getDataJson = function () {
			return dataJson;
		}

		util.event('lay-click', {
			layerclose: function (othis) {//关闭当前弹窗
				top.layer.close(top.layer.getFrameIndex(window.name));//关闭当前页
			},
		});

	})
</script>